import React, { Component } from 'react'
import {
  Text,
  View,
  StyleSheet
} from 'react-native'

import { connect } from 'react-redux'

import { push, logout } from '../../actions/nav'
import RzLoading from '../../components/common/rzLoading'
import Button from '../../components/common/button'
import TopViewPage from '../../components/home/topViewPage'
import PureButton from '../../components/common/pureButton'

import {
  PRODUCT,
  TABLEVIEW
} from '../../constants/pages'

// import {
//   WINDOW_WIDTH
// } from '../../constants/varibles'

import DB from '../../utils/storage'

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start',
    // alignItems: 'stretch',
    // backgroundColor: '#aaffaa',
    backgroundColor: 'transparent',
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0
  },
  viewPager: {
    height: 200
  }
})

class Home extends Component {
  constructor (props) {
    super(props)
    this.displayName = 'Home'

    this.pushToPro = this.pushToPro.bind(this)
    this.pushToTableView = this.pushToTableView.bind(this)
  }

  componentWillMount () {
    console.log('===Home==22==')
    DB.get('user').then((user) => {
      console.log('==DB.get(\'user\')==', user)
      if (user && user.userId) {
        console.log('===有user==')
      } else {
        console.log('===没有user==')
        this.props.dispatch(logout())
      }
    })
  }

  componentDidMount () {
    console.log('===Home==33==')
  }

  pushToPro () {
    const { dispatch } = this.props
    console.log('===Home==44==')
    // this.props.navigation.navigate('Product', { user: 'Lucy' })
    dispatch(push(PRODUCT, { user: 'Lucy' }))
  }

  pushToTableView () {
    const { dispatch } = this.props
    console.log('===Home==pushToTableView==')
    dispatch(push(TABLEVIEW, { user: 'Lucy' }))
  }

  render () {
    const {
      topViewPages
    } = this.props
    return (
      <View style={styles.container}>
        <TopViewPage
          style={styles.viewPager}
          pageArray={topViewPages}
          onPressPage={(index) => console.log('===pageIndex==', index)}
        />
        <Button
          onPress={this.pushToPro}
          style={{ margin: 20 }}
          buttonTitle={'Home'}
        />
        <Button
          onPress={this.pushToTableView}
          style={{ margin: 20 }}
          buttonTitle={'TableView'}
        />
        <PureButton
          buttonTitle={'PureButton1'}
        />
        <RzLoading />
      </View>
    )
  }
}

Home.propTypes = {
}

Home.navigationOptions = {
  headerTitle: 'Home',
  headerRight: <Text>right
  </Text>,
  headerLeft: null
}

function mapStateToProps (state) {
  const { home } = state
  console.log('==state==', state)
  return {
    topViewPages: home.get('topViewPages')
  }
}

function mapDispatchToProps (dispatch) {
  return {
    dispatch
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)
